<template>
  <div class="page-content">
    <el-dialog
      :title="title"
      :visible.sync="detailDialog"
      width="750px"
      :before-close="tableClose"
    >
      <el-form
        :model="detailInfo"
        status-icon
        label-width="80px"
      >
      <el-row>
          <el-col
            :span="8"
            v-for="(item, index) in detailInfo.dovecoteOutBillVoList"
            :key="item.key"
            style="border-bottom: 1px solid #f0f0f0; padding: 10px"
          >
            <el-card :body-style="{ padding: '0px' }" class="card">
              <div style="margin-left:-20%">
                <el-row style="margin-top: 10px">
                  <el-form-item>
                    <span>鸽棚id:{{item.dovecoteNumber}}</span><br/>
                    <span>负责人:{{item.dovecoteDirector}}</span><br/>
                  </el-form-item>
                </el-row>
                <el-row style="margin-top:-8%">
                  <el-col 
                  v-for="(person,index) in item.dovecoteOutBaseVoList"
                  :key="person.key"
                  ><el-form-item>
                    <span>数量(只):{{person.amount}}</span><br/>
                    <span>单价(元):{{person.unitPrice}}</span><br/>
                    <span>备注:{{person.remark}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
      </el-row>
        <el-form-item>
            <el-col style="margin-left:40%">
              <el-button @click="closeform">关闭</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { AddOrder } from "@/api/Dovecote/ProductionCount/ShipmentOutBill.js";
export default {
  name: "DetailInfo",
  props: {
    detailDialog: {
      Boolean,
      default: false,
    },
    //详细信息
    detailInfo: {
      Object,
      default: {},
    },
  },
  data() {
    return {
      //表名
      title: "详情信息",
    };
  },
  watch: {},
  methods: {
    //查询表格数据
    DisplayData() {
      this.$emit("DisplayData");
    },

    //关闭表单
    closeform() {
      var a = false;
      this.$emit("closeAddDialog", a);
      this.DisplayData();
    },

    // 关闭弹窗
    tableClose() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.closeform();
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.card {
  padding-right: 10px;
  background-image: url("../../../assets/image/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>

